<%@page import="model.RoomType"%>
<%@page import="dao.impl.RoomTypeDaoImpl"%>
<%@page import="dao.intf.RoomTypeDao" %>
<%@page import="java.util.ArrayList" %>
<%@page import="java.util.List" %>
<%@page import="java.util.*" %>


<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML>
<html>
<head>
    <title>Hotel Arbour : Home Page</title>    
	<script src="js/jquery-1.9.1.js" language="javascript"></script>
	<script src="js/jquery-ui-1.10.2.custom.js" language="javascript"></script>
	<script type="text/javascript" src="js/post_watermarkinput.js"></script>
	<link rel="stylesheet" href="CSS/ui-lightness/jquery-ui-1.10.2.custom.css" type="text/css">
	<link href="CSS/vasplus_programming_blog_CSS.css" rel="stylesheet" type="text/css">
	
	
	
<script>
	$(function() {
		$( "#accordion" ).accordion();	
		
		var date = new Date();
		var currentYear = date.getFullYear();
		var currentMonth = date.getMonth();
		var currentDate = date.getDate();
		var currentDate2 = date.getDate() + 1;
		
		$("#checkindate").datepicker({
			onSelect: function (date) {
				if ($("#checkindate").val() != '' && $("#checkoutdate").val() != ''){
					var start = $('#checkindate').datepicker('getDate');
				    var end = $('#checkoutdate').datepicker('getDate');
				    var diff = (end - start)/1000/60/60/24;
					$("#night").val(diff);
					//alert(diff);
				}            
	        },
			dateFormat: "yy-mm-dd",
			minDate:new Date(currentYear, currentMonth, currentDate)
		});
		
		$("#checkoutdate").datepicker({
			onSelect: function (date) {
				if ($("#checkindate").val() != '' && $("#checkoutdate").val() != ''){
					var start = $('#checkindate').datepicker('getDate');
				    var end = $('#checkoutdate').datepicker('getDate');
				    var diff = (end - start)/1000/60/60/24;
					$("#night").val(diff);
					//alert(diff);
				}
	            
	        },
			dateFormat: "yy-mm-dd",
			minDate:new Date(currentYear, currentMonth, currentDate2)		
		});
		
	});	
	
	
</script>
<script>
$(document).ready(function() { 
	
	//if ($('#checkindate').onSelect == true) alert ('checkin');
	
    $('#btnRates').click(function(event) { 
    	var msg = '';
    	if ($('#checkindate').val() == '') 
			msg = msg + 'Please select Check In date.\n';
    	if ($('#checkoutdate').val() == '') 
			msg = msg  + 'Please select Check Out date.\n';	
    	if ($('#adult').val() == '' )
			msg = msg  + 'Please enter number of Adult(s).\n';
		if ($('#children').val() == '' )
			msg = msg  + 'Please enter number of Children.\n';
		if (parseInt($('#night').val()) < 1 )
			msg = msg  + 'Checkin date must be earlier than Checkout date.\n';
		
		if (msg != '' ) alert (msg);
		else{
			$('#checkrates').val("1");
			$('#frmIndex').submit();
	    	/*$.post('Availability',
	    		{	    			
	    			checkindate:$('#checkindate').val(),
	    			checkoutdate:$('#checkoutdate').val(),
	    			adult:$('#adult').val(),
	    			children:$('#children').val(),
	    			night:$('#night').val(),
	    			roomtype:$('#roomtype').val(),
	    			rooms:$('#rooms').val()
	    		},
	    	function(responseText) { 
	    		$('#content').attr('style' , 'display:none');
	    		$('#footer').attr('style' , 'display:none');
	    		
	        });*/
	        
	        
		}//end else
    	
    });
});
$(document).ready(function(){	
	
	//$('#availability').attr('style' , 'display:none');
	$('#rooms').keypress(function(event){		
		if (event.charCode > 31 && (event.charCode < 48 || event.charCode > 57)) {
			return false;
		}
	}); 
	$('#adult').keypress(function(event){		
		if (event.charCode > 31 && (event.charCode < 48 || event.charCode > 57)) {
			return false;
		}
	});
	$('#children').keypress(function(event){		
		if (event.charCode > 31 && (event.charCode < 48 || event.charCode > 57)) {
			return false;
		}		
	});
	$('#night').keypress(function(event){		
		if (event.charCode > 31 && (event.charCode < 48 || event.charCode > 57)) {
			return false;
		}
	});	
});


	
</script>

</head>
 
<body style="font-family:Calibri;">

<form action="Home" id="frmIndex" name="frmIndex" method="POST">
<!--  <form id="frmIndex" name="frmIndex" action="HOME" method="POST">-->
	
	 

	<div id="body" style="width:900px ;margin:0 auto; padding:0 0 0 0 auto;">
	
	<!-- Header-->		
		<input type="hidden" value="" name="checkrates" id="checkrates">
		<table width="100%" border="0px" cellpadding="0">
		<tr>
			<td><img src="images/logo.jpg" /></td>
			
			<td colspan="2">
				<p align="right" style="font-weight:bold;">			
					<a href="index.jsp" style="text-decoration:none;"><font style="color:#7E354D">Home&nbsp;&nbsp;|&nbsp;&nbsp;</font></a>
					<a href="index.jsp" style="text-decoration:none;"><font style="color:#7E354D">Promotion&nbsp;&nbsp;|&nbsp;&nbsp;</font></a>
					<a href="index.jsp" style="text-decoration:none;"><font style="color:#7E354D">Rooms&nbsp;&nbsp;&nbsp;</font></a>						
				</p> 
				<p align="right" style="font-weight:bold;">
					<div id="login_response"></div>	
				</p>					
				
			</td>
		</tr>
        <tr>
            <td style="width:65%;vertical-align:top;">
				<video width="600" height="260" controls>
				<source src="movie.mp4" type="images/Sample.mp4"></source></video>
				
            </td>
			
            <td style="width:35%;vertical-align:top;"> 
				<table border="0px" width="100%">
					<tr>
					    <td>
					        <div id="accordion">	
                                 <h1 style="border:1px solid #7E354D;"><font style="color:#7E354D">Reservation</font></h1>
					                <div>
					                    <table>
											<tr><td>Check-In:</td><td><input type="text" id="checkindate" name="checkindate" readonly="readonly"/></td></tr>
											<tr><td>Check-Out:</td><td><input type="text" id="checkoutdate" name="checkoutdate"/></td></tr>
											<tr>
												<td>Room Type:</td>												
											    <td><select name="roomtype" id="roomtype">
											    	<option value='All'>--- All Room ---</option>
											    	<%
														
												    	List<RoomType> roomTypeList = new ArrayList<RoomType>();
												    	RoomTypeDaoImpl roomTypeDaoObj = new dao.impl.RoomTypeDaoImpl();
												    	roomTypeList = roomTypeDaoObj.getRoomTypeList();
												    	
												    	for (int i = 0 ; i < roomTypeList.size() ; i ++){	
															out.println("<option value='"+roomTypeList.get(i).getId()+"'>" + roomTypeList.get(i).getName() + "</option>");																
														}	
													%>                                                     
                                                </select>&nbsp;
                                                
                                                </td>
											</tr>																						
											<tr>
												<td colspan="2" align="center">
													Rooms:&nbsp;&nbsp;Adult:&nbsp;&nbsp;Children:&nbsp;&nbsp;Nights:
													<br><input type="text" id="rooms" name="rooms" size="2" value="1" maxlength="3"/>&nbsp;
													&nbsp;&nbsp;<input type="text" id="adult" name="adult" size="3" value="1" maxlength="3"/>&nbsp;
													<input type="text" id="children" name="children" size="3" value="0" maxlength="1"/> 
													&nbsp;&nbsp;<input type="text" id="night" name="night" size="2" value="1" maxlength="3"/>&nbsp;
														
												</td>
											</tr>											
											
											<tr>
												<td colspan="2" align="center">
													<input type="button" id="btnRates" value="Check Rates"/>&nbsp;
													<a href="search.jsp" style="text-decoration:none;"><font style="color:#7E354D">View&nbsp;|&nbsp;</font></a>
													<a href="search.jsp" style="text-decoration:none;"><font style="color:#7E354D">Modify&nbsp;|&nbsp;</font></a> 
													<a href="search.jsp" style="text-decoration:none;"><font style="color:#7E354D">Cancel&nbsp;</font></a>
												</td>
											</tr>
										</table>
                                    </div> 
                                     <h1 style="border:1px solid #7E354D;"><font style="color:#7E354D">Corporate Login</font></h1>
					                <div>
										<table>
											<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
											
											<tr><td>Login ID:</td><td><input type="text" id="emailLogin" name="emailLogin" size="10"/></td></tr>
											<tr><td>Password:</td><td><input type="text" id="pswLogin" name="pswLogin" size="10"/></td></tr>
											<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
											<tr><td>&nbsp;</td><td><input type="button" id="btnLogin" name="btnLogin" value="Log In" onclick="login();"/>&nbsp;
																	<input type="button" id="signup" name="signup" value="Sign Up" onclick="toggleDiv();"/></td></tr>
										</table>
                                    </div>                                 
					        </div>
					    </td>
					</tr>					
				</table>
			</td>
        </tr>
    </table>
	
    <!-- Header-->	
	<!-- Content -->
   <div id="content">
        <table width="100%" border="0px" cellpadding="10 px">
            <tr>
                <td rowspan="2" style="width:50%;vertical-align:top; border-right: 0.05cm solid #7E354D;border-bottom: 0.05cm solid #7E354D;">
				<div>
                <h2><font style="color:#7E354D;">Hotel Arbour</font></h2>
				<h3 style="margin-left:100px;"><font style="color:#7E354D;">...because life is so rewarding</font></h3>
				<div style="margin:10px 0; text-align:center;text-align:center;">
					<img src="images/hotelAdvertisement.jpg" width="200" height="135" border="0" />
				</div>
                <p>Step into The Hotel Arbour and enter a captivating world of rewards and lifestyle privileges! The Hotel Arbout rewards our valued corporate clients for making frequent reservations at our serviced residences around the world.</p>
				</div>
				</td>
                <td style="width:50%;vertical-align:top; border-bottom: 0.05cm solid #7E354D;">
				<div>
					<h3 style="background:url(images/icon_loudhaler.gif) top left no-repeat; padding-left:30px; line-height:24px;"><font style="color:#7E354D">Promotions</font></h3>
				</div>
				
				From now till 30 Jun 2013, simply book and stay 30 room nights or more with Ascott and redeem a complimentary 4GB Thumbdrive.
				<div style="margin:10px 0; text-align:center;text-align:center">
					<img src="images/thumbdrive.jpg" width="200" height="135" border="0" />
				</div>
				</td>
            </tr>
			<tr>
				<td style="width:50%;vertical-align:top;border-bottom: 0.05cm solid #7E354D;">
				<h3 style="background:url(images/icon_magnifier.gif) top left no-repeat; padding-left:30px; line-height:24px;"><font style="color:#7E354D">Highlighted Room</font></h3>
				<div class="spotlight-content">
					<p><img hspace="8" height="120" width="178" vspace="8" align="left" 
						src="images/hilightRoom.jpg" alt="" />
					</p>
					<p style="text-align: justify">
					Hotel Arbour offers the right mix of comfort, functionality and style to create the perfect balance with 534 superior rooms; providing an alternative for discerning yet budget-conscious leisure travellers. 
					Set your sight on the M deluxe rooms which are tastefully furnished to provide greater convenience to the traveller looking for business accommodation in Singapore.
					</p></div>
				</td>
			</tr>
		</table>
	</div>
	
   <!-- Content -->
 	<!-- Footer -->
	<div id="footer">
		<table width="100%" border="0px" cellpadding="3px">            
			<tr>
				<td ><br>
						<div style="wi<br>:550px;" align="left">
						<textarea cols="40" rows="8" name="posted_comment" id="posted_comment" placeholder="What's on your mind?"  class="textAreaBox" style="width:500px; height:20px; padding-top:10px;"></textarea></div>
						<div style="width:420px;float:left; padding-top:5px; border:0px solid #CCC;" align="left">
							<div id="comment_logout" onClick="comment_logout();" style="font-family:Verdana, Geneva, sans-serif; font-size:12px; color:#69F;display:none; padding-top:10px; cursor:pointer;"><span class="ccc"><a href="javascript:void(0);">Logout</a></span></div>
							<input type="text" placeholder="Fullname" style="width:290px; height:20px;" id="fullname_id" class="textAreaBox" value=""></div>
						<div style="width:100px; float:left;padding-top:5px;border:0px solid #CCC;" align="right">
						<a href="javascript:void(0);" class="vpb_general_button" onClick="Post_Comment_By_Vasplus_Programming_Blog();">Post</a>
						</div><br clear="all">
						<div style="width:500px;float:left; padding-top:0px;" align="left">
						<input type="text" placeholder="Email Address" style="width:290px; height:20px;" id="email_id" class="textAreaBox" 
						value="">
						</div><br clear="all"><br clear="all">
						<div align="left" id="display_posted_comments_by_vasplus_programming_blog"></div><br clear="all">
						<div align="left" id="vasplusProgrammingBlogCommentsPosted"></div>
						&nbsp;
						
				</td>
				<td style="width:350px;vertical-align:top;"> <br><iframe src="https://www.facebook.com/plugins/like.php?href=YOUR_URL"
						scrolling="no" frameborder="0"
						style="border:none; width:450px; height:80px"></iframe></td>
			</tr>
			
     </table>
   </div>
	<!-- Footer -->
	<div id="PnlAvailability">		
		
	</div>
   </div>
</form>
</body>
</html>
